<template>
    <div class="app">
        <div class="box" v-if="!flag">
            <h2 style="margin-bottom: 20px">后台管理</h2>
            <el-input
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    v-model="username"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    v-model="password"
                    style="margin-bottom: 10px"
            >
            </el-input>
            <div @click="forget">
                <el-button type="text" style="float: right;margin-bottom: 10px">忘记密码</el-button>
            </div>
            <div @click="login">
                <el-button style="width: 100%" type="primary">登录</el-button>
            </div>
        </div>
        <div class="box" v-if="flag">
            <h2 style="margin-bottom: 20px">忘记密码</h2>
            <el-input
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    v-model="name"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    type="password"
                    placeholder="请输入电话号"
                    prefix-icon="el-icon-phone"
                    v-model="phonenumber"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    type="password"
                    placeholder="请输入新密码"
                    prefix-icon="el-icon-lock"
                    v-model="newPwd"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <div style="display: flex;justify-content: space-around">
                <el-button  @click="quxiao">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {adminLogin, forgetpassword} from '../api/api'
    export default {
        name: "index",
        data(){
            return {
                username:'',
                password:'',
                phonenumber:'',
                newPwd:'',
                name:'',
                flag: false
            }
        },
        methods: {
            //登录
            login(){
                adminLogin(this.username,this.password).then(res=>{
                    // console.log(res)
                    this.username = ''
                    this.password = ''
                    if(res.status == 0 ) {
                        sessionStorage.setItem('adminid', res.token)
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.$router.push('/overviews')
                        // console.log(sessionStorage.getItem('adminid'))
                    }else {
                        this.$message({
                            message: res.message,
                            type: 'error'
                        });
                    }

                })

            },
            //控制忘记密码box
            forget(){
                this.flag = true
            },
            //忘记密码
            // 确定
            confirm(){
                forgetpassword(this.name, this.phonenumber, this.newPwd).then(res=>{
                    console.log(res)
                    this.name = ''
                    this.phonenumber = ''
                    this.newPwd = ''
                    if(res.status == 0){
                        this.flag = false
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }else  {
                        this.$message({
                            message: res.message,
                            type: 'error'
                        });
                    }
                })
            },
            //取消
            quxiao(){
                this.flag = false
            }

        }
    }
</script>

<style scoped>
    .app {
        width: 100%;
        height: 100vh;
        background: url("../assets/images/cover.jpg") bottom repeat-x #049ec4;
        animation: animate-cloud 20s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    @keyframes animate-cloud {
        0% {
            background-position: 600px 100%;
        }
        100% {
            background-position: 0 100%;
        }
    }
    .box {
        width: 300px;
        background-color: white;
        padding: 40px 20px;
        border-radius: 10px;
    }
</style>
